<template>
	<view class="post-info-container">
		<x-skeleton type="text" :loading="loading" :configs="contentConfigs">
			<view class="post-info">
				<view class="common-head">
					<view class="common-name">
						<text class="name-text">{{ detail.stationName }}</text>
						<text class="text-color" v-if="detail.salaryRange !== '面议'">{{ detail.salaryRange }}元</text>
						<text class="text-color" v-else>面议</text>
					</view>
					<view class="post-other-info">
						<text class="post-addr">{{ detail.stationAddr }}</text>
						<text class="post-condition">{{ detail.stationEdu }}·{{ detail.stationLesson }}·招{{ detail.recruitsNumber }}人</text>
					</view>
				</view>
				<view class="post-desc">
					<text class="name-text">岗位描述</text>
					<view class="labels">
						<text v-for="label in labels" :key="label">{{ label }}</text>
					</view>
				</view>
				<view class="post-detail">
					<text class="name-text">岗位详情</text>
					<view class="detail">
						<u-parse :content="detail.stationDesc" :tagStyle="style"></u-parse>
					</view>
				</view>
			</view>
		</x-skeleton>
		<view class="company-info">
			<view class="common-name">
				<text class="name-text">公司信息</text>
				<view class="company-name" @click="nologinJump(`/subpage/talentemployment/employment/companyinfo?id=${companyInfo.id}&type=${type}`)">
					<image class="company-img" :src="api_host + companyInfo.compLogo"></image>
					<view class="company-desc">
						<text class="name">{{ companyInfo.compName }}</text>
						<text class="scale">{{ companyInfo.compScale }}·{{ companyInfo.compIndustry }}</text>
						<view class="right-arrow"></view>
					</view>
				</view>
			</view>
			<view class="map-address">
				<!-- <v-map></v-map> -->
				<!-- 地图组件 -->
				<map
				  id="map"
				  v-if="showMap"
				  :longitude="longitude" 
				  :latitude="latitude" 
				  scale="14"
				  :markers="markers"
				  show-location
				  @callouttap="callouttap"
				  style="width: 100%;height: 400rpx;;border-radius: 24rpx;overflow: hidden;"
				>
				  <cover-view slot="callout">
				  	<cover-view class="custom-callout" :marker-id="markers[0].id">
						<cover-view class="callout-title">工作地点</cover-view>
						<cover-view class="callout-content ellipsis">{{ companyInfo.compAddr }}</cover-view>
					</cover-view>
				  </cover-view>
				</map>
			</view>
		</view>
		<view class="post-footer">
			<view class="post-operate">
				<view class="operate-item">
					<button open-type="share" class="share-wrap">
						<image class="operate-icon" src="https://hxs.dsjhs.com:553/prod-api/profile/fenxiang-icon.png"></image>
						<view class="operate-text">分享</view>
					</button>
				</view>
				<view class="operate-item" @tap="starlikeBtn(1,7, detail.id)">
					<image class="operate-icon" :src="collectionIconUrl"></image>
					<text class="operate-text">收藏</text>
				</view>
				<view class="operate-item" style="margin-right: 0;" @tap="handleCall">
					<image class="operate-icon" src="https://hxs.dsjhs.com:553/prod-api/profile/dianhua-icon.png"></image>
					<text class="operate-text">电话</text>
				</view>
			</view>
			<view class="send-resume-wrap">
				<button :class="['send-resume-btn', { 'disabled': detail.isOver === 1 }]" @tap="handleSend">{{ detail.isOver === 0 ? '投递简历': '已投递' }}</button>
			</view>
		</view>
		<resumeLayer :showDialog="showResumeLayer" :resumeStatus="resumeStatus" @close="handleCloseLayer"></resumeLayer>
	</view>
</template>

<script>
	// import map from '@/components/map/index.vue'
	import resumeLayer from '@/components/resumeLayer/index.vue'
	import {
		stationInfo,
		getOverStation
	} from '@/common/api_employment.js'
	export default {
		components: {
			resumeLayer,
		},
		data() {
			return {
				longitude: '',
				latitude: '',
				 markers: [{
					id: 0,
					latitude: 23.099994,
					longitude: 113.324520,
					width: 24,
					height: 24,
					iconPath: 'https://hxs.dsjhs.com:553/prod-api/profile/weizhi-icon.png',
					customCallout: {
					  anchorY: 0,
					  anchorX: 0,
					  display: 'ALWAYS'
					}
				 }],
				 showResumeLayer: false,
				 showMap: false,
				 loading: true,
				 detail: {},
				 id: '',
				 resumeStatus: '',
				 contentConfigs: {
					 gridRows: 3
				 },
				 style: {
				 	p: 'font-size: 13px;color: #34314F;line-height: 22px;',
				 	img: 'display:-webkit-box;width:100% !important;'
				 },
				 type: '',
				 careerId: ''
			}
		},
		onShow() {
			// const token = uni.getStorageSync('token')
			// console.log(token, 'this.hasLogin');
			// if (!this.hasLogin) {
			// 	this.toLogin()
			// }
		},
		onLoad(option) {
			console.log(option, 888)
			
			this.id = option.id
			this.type = option.type
			this.careerId = option.careerId
			this.getPostInfo(option.id, this.type = '0', this.careerId = '')
		},
		computed: {
			labels() {
				let tempArr = []
				if (this.detail?.stationSpecifics?.indexOf(',') > -1) {
					tempArr =  this.detail.stationSpecifics.split(',')
				} else {
					tempArr = [this.detail.stationSpecifics]
				}
				return tempArr
			},
			companyInfo() {
				return this.detail.companyInfo
			},
			// 收藏
			collectionIconUrl() {
				return this.detail.isCollection === 0 ? 'https://hxs.dsjhs.com:553/prod-api/profile/shoucang-icon.png' : 'https://hxs.dsjhs.com:553/prod-api/profile/star.png'
			},
		},
		onShareAppMessage(res) {
			return {
				title: '东楚畅通',
				path: `/subpage/talentemployment/employment/postinfo?id=${this.detail.id}&type=${this.type}&careerId=${this.careerId}`,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
					console.log(res, 'onShareAppMessage')
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onShareTimeline() {
			return {
				title: '招聘: ' + this.detail.stationName + ' 工资:' + this.detail.salaryRange,
				imageUrl: this.api_host + this.companyInfo.compLogo
			}
		},
		methods: {
			open() {
				// this.boolShow = true
				this.$refs.popupRef.show() 
				console.log(this.$refs.popupRef, 'this.$refs.popup')
				// this.$refs.popup.open()
			},
			toLogin() {
				uni.showModal({
					title:'提示',
					content:'请先完成登录',
					showCancel: false,
					confirmText:'去登录',
					success(res) {
						if(res.confirm){
							uni.navigateTo({
								url:'/pages/me/mobile_login'
							})
						}
					}
				})
			},
			// 打电话
			handleCall() {
				if (this.detail.isOver === 1) {
					uni.makePhoneCall({
						phoneNumber: this.detail.phone
					})
				}
				
			},
			// 导航
			callouttap() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					name: this.detail.companyInfo.compName,
					address: this.detail.companyInfo.compAddr
				})
			},
			
			// 投简历
			async handleSend() {
				if (!this.hasLogin) {
					this.toLogin()
					return false
				}
				// isOver 是否已投递 0否  1是
				if (this.detail.isOver === 0) {
					const result = await getOverStation({ stationId: this.detail.id, careerId: this.careerId })
					console.log(result, 'result')
					if (result.code === 200) {
						// data 300没有简历 400简历不完善 600岗位已投
						if (result.data === 300 || result.data === 400) {
							this.showResumeLayer = true
							this.resumeStatus = result.data
						} else if (result.data === 600){
							
						} else {
							uni.showToast({
								title: '投递成功',
								icon: 'none'
							})
							this.getPostInfo(this.id, this.type, this.careerId)
						}
					}
				} else {
					uni.showToast({
						title: '您已经投递过了，请一周后再试试~',
						icon: 'none'
					})
				}
			},
			
			// 关闭弹窗
			handleCloseLayer() {
				console.log('handleCloseLayer')
				this.showResumeLayer = false
			},
			
			async getPostInfo(id, type, careerId) {
				const postData = await stationInfo({id, type, careerId})
				this.loading = false
				if(postData.code === 200) {
					this.detail = postData.data
					console.log(this.detail, 'ddd')
					const { companyInfo } = postData.data
					this.longitude = Number(companyInfo.longitude)
					this.latitude = Number(companyInfo.latitude)
					this.markers[0].longitude = Number(companyInfo.longitude)
					this.markers[0].latitude = Number(companyInfo.latitude)
					this.showMap = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.post-info-container {
		width: 100%;
		min-height: 100vh;
		padding: 24rpx 32rpx 180rpx 32rpx;
		background-color: #F2F5FF;
		box-sizing: border-box;
		.post-info {
			width: 100%;
			padding: 40rpx 32rpx 36rpx;
			border-radius: 40rpx;
			margin-bottom: 24rpx;
			background-color: #fff;
			box-sizing: border-box;
			.common-head {
				padding-bottom: 20rpx;
				margin-bottom: 28rpx;
				border-bottom: 1px solid rgba(52, 49, 79, 0.08);
			}
			.common-name {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				
				.text-color {
					font-weight: 500;
					font-size: 32rpx;
					color: #FF7F1C;
					line-height: 22px;
				}
			}
			.post-other-info {
				display: flex;
				text {
					position: relative;
					padding-left: 44rpx;
					margin-right: 48rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: rgba(52, 49, 79, 0.7);
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					
					&::before {
						position: absolute;
						top: 0;
						left: 0;
						display: block;
						width: 32rpx;
						height: 32rpx;
						content: '';
					}
					&.post-addr::before {
						background: url('https://hxs.dsjhs.com:553/prod-api/profile/wz-icon.png') no-repeat center;
						background-size: 100% 100%;
					}
					&.post-condition::before {
						background: url('https://hxs.dsjhs.com:553/prod-api/profile/gwb-icon.png') no-repeat center;
						background-size: 100% 100%;
					}
				}
			}
			.post-desc {
				margin-bottom: 36rpx;
			}
			.post-detail {
				.detail {
					font-weight: 400;
					font-size: 26rpx;
					color: #34314F;
					line-height: 44rpx;
					text-align: left;
				}
			}
			.labels{
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				text {
					display: block;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					padding: 4rpx 12rpx;
					font-size: 24rpx;
					color: #34314F;
					line-height: 32rpx;
					border-radius: 8rpx;
					background-color: #F4F4F4;
					box-sizing: border-box;
				}
			}
		}
		.company-info {
			width: 100%;
			padding: 28rpx 32rpx 32rpx;
			border-radius: 40rpx;
			margin-bottom: 24rpx;
			background-color: #fff;
			box-sizing: border-box;
			.name-text {
				margin-bottom: 16rpx;
				
			}
			.company-name {
				display: flex;
				flex-wrap: nowrap;
				.company-img {
					flex: 0 0 176rpx;
					height: 132rpx;
					margin-right: 16rpx;
					border-radius: 24rpx;
				}
				.company-desc {
					position: relative;
					flex: auto;
					padding-top: 26rpx;
					text {
						display: block;
					}
					.name {
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
						text-align: left;
						font-style: normal;
						margin-bottom: 8rpx;
						white-space: nowrap; /* 不换行 */
						overflow: hidden; /* 隐藏超出的内容 */
						text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
						max-width: 400rpx; /* 设置最大宽度以限制文本的显示长度 */
					}
					.scale {
						font-weight: 400;
						font-size: 26rpx;
						color: rgba(52, 49, 79, 0.7);
						line-height: 16px;
						text-align: left;
						font-style: normal;
					}
					.right-arrow {
						position: absolute;
						top: 50%;
						right: -18rpx;
						display: block;
						width: 32rpx;
						height: 32rpx;
						transform: translateY(-50%);
						background: url('@/static/images/index/right-arrow.png') no-repeat center;
						background-size: 100% 100%;
					}
				}
			}
			.map-address {
				height: 164px;
				border-radius: 24rpx;
				overflow: hidden;
				margin-top: 20rpx;
				
			}
		}
		.name-text {
			display: block;
			margin-bottom: 20rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #34314F;
			line-height: 22px;
		}
		.post-footer {
			position: fixed;
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 172rpx;
			padding: 20rpx 32rpx 0;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 20px 20px 0px 0px;
			.post-operate {
				display: flex;
				.operate-item {
					margin-right: 80rpx;
					.share-wrap {
						padding: 0;
						background-color: #fff;
						&::after {
							border: 0;
						}
					}
					.operate-icon {
						display: block;
						width: 60rpx;
						height: 60rpx;
						
					}
					.operate-text {
						font-weight: 400;
						font-size: 28rpx;
						color: #34314F;
						line-height: 40rpx;
						text-align: left;
					}
				}
			}
			.send-resume-wrap {
				button {
					width: 276rpx;
					height: 96rpx;
					background: #FFDE6D;
					border-radius: 20px;
					backdrop-filter: blur(25px);
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 96rpx;
					text-align: center;
					&::after {
						border: 0;
					}
					&.disabled {
						background-color: #f7f7f7;
						color: rgba(0,0,0,.3);
					}
				}
			}
		}
	}
	.custom-callout {
		position: relative;
		width: 440rpx;
		height: 116rpx;
		padding: 16rpx 16rpx 20rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.08);
		border-radius: 12px;
		box-sizing: border-box;
		.callout-title {
			display: block;
			font-weight: 600;
			font-size: 28rpx;
			margin-bottom: 8rpx;
			color: #34314F;
			line-height: 20px;
			text-align: left;
		}
		.callout-content {
			font-weight: 400;
			font-size: 26rpx;
			color: rgba(52, 49, 79, 0.7);
			line-height: 16px;
			text-align: left;
			font-style: normal;
		}
		&::after {
			position: absolute;
			top: 50%;
			right: 20rpx;
			display: block;
			width: 32rpx;
			height: 32rpx;
			transform: translateY(-50%);
			background: url('@/static/images/index/right-arrow.png') no-repeat center;
			background-size: 100% 100%;
			content: '';
		}
	}
	
	.ellipsis {
		white-space: nowrap; /* 不换行 */
		overflow: hidden; /* 隐藏超出的内容 */
		text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
		max-width: 370rpx; /* 设置最大宽度以限制文本的显示长度 */
	}
</style>